'use client'
import { useEffect, useRef } from 'react'
import CanvasPen from './canvas'

export default function CanvasWrapper() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    let pen: CanvasPen
    if (canvasRef.current) {
      // 初始化canvas
      pen = new CanvasPen(canvasRef.current)
    }

    return () => {
      console.log('销毁Canvas')
      if (pen) {
        pen.destroy()
      }
      return
    }
  }, [])

  return <canvas ref={canvasRef} className="w-full h-[1000px] bg-white rounded-sm" />
}
